From 207e593075b01815973c4bfcb5a0d90f1de8d11e Mon Sep 17 00:00:00 2001 From: Benjamin Otte Date: Tue, 25 Aug 2015 02:08:29 +0200 Subject: [PATCH] listbox: Mark activatable rows with a .activatable style class Do not use .button anymore. This is for 2 reasons: 1. The styling is seperate in our themes, so it doesn't make sense to share the style class. 2. Due to the shared styling of .buton, listbox rows inherit all the special case styles that exist for buttons - such as linked buttons, header buttons, entry buttons, spinbutton buttons, etc. This means that the code has to check all these special cases all the time and for listbox rows, this is very slow. --- gtk/gtklistbox.c | 6 +-- gtk/theme/Adwaita/_common.scss | 20 ++++----- gtk/theme/Adwaita/gtk-contained-dark.css | 50 +++++++++++----------- gtk/theme/Adwaita/gtk-contained.css | 50 +++++++++++----------- gtk/theme/HighContrast/_common.scss | 22 +++++----- gtk/theme/HighContrast/gtk.css | 54 ++++++++++++------------ 6 files changed, 99 insertions(+), 103 deletions(-) diff --git a/gtk/gtklistbox.c b/gtk/gtklistbox.c index 74b3da1ec5..fd91acfbea 100644 --- a/gtk/gtklistbox.c +++ b/gtk/gtklistbox.c @@ -3017,7 +3017,7 @@ gtk_list_box_row_init (GtkListBoxRow *row) context = gtk_widget_get_style_context (GTK_WIDGET (row)); gtk_style_context_add_class (context, GTK_STYLE_CLASS_LIST_ROW); - gtk_style_context_add_class (context, GTK_STYLE_CLASS_BUTTON); + gtk_style_context_add_class (context, "activatable"); } static void @@ -3426,9 +3426,9 @@ gtk_list_box_update_row_style (GtkListBox *box, context = gtk_widget_get_style_context (GTK_WIDGET (row)); if (ROW_PRIV (row)->activatable || (ROW_PRIV (row)->selectable && can_select)) - gtk_style_context_add_class (context, GTK_STYLE_CLASS_BUTTON); + gtk_style_context_add_class (context, "activatable"); else - gtk_style_context_remove_class (context, GTK_STYLE_CLASS_BUTTON); + gtk_style_context_remove_class (context, "activatable"); } static void diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 9005d92ab3..b821895ea6 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -2568,15 +2568,15 @@ GtkScrolledWindow { padding: 2px; } -.list-row.button, -.list-row.button:backdrop, -.list-row.button:backdrop:active, -.list-row.button:backdrop:checked, -.list-row.button:backdrop:insensitive, -.list-row.button:backdrop:insensitive:active, -.list-row.button:backdrop:insensitive:checked, -.list-row.button:insensitive:active, -.list-row.button:insensitive:checked { +.list-row.activatable, +.list-row.activatable:backdrop, +.list-row.activatable:backdrop:active, +.list-row.activatable:backdrop:checked, +.list-row.activatable:backdrop:insensitive, +.list-row.activatable:backdrop:insensitive:active, +.list-row.activatable:backdrop:insensitive:checked, +.list-row.activatable:insensitive:active, +.list-row.activatable:insensitive:checked { // reset button inherited stuff @extend %undecorated_button; background-color: transparentize($base_color,1); // for the transition @@ -2586,7 +2586,7 @@ GtkScrolledWindow { } -.list-row.button { +.list-row.activatable { // let's take care of background colors &:hover { background-color: mix($fg_color, $base_color, 5%); diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index c198b686d7..ac7beec320 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -1134,16 +1134,15 @@ GtkTextView { .titlebar .button.titlebutton:visited, .button:link:hover, .button:link:active, .button:link:checked, .button:visited:hover, .button:visited:active, .button:visited:checked, .button:link:backdrop, .button:visited:backdrop, .menu.button, .header-bar .menu.button.titlebutton, .titlebar .menu.button.titlebutton, .notebook tab .button, .notebook tab .header-bar .button.titlebutton, .header-bar .notebook tab .button.titlebutton, .notebook tab .titlebar .button.titlebutton, -.titlebar .notebook tab .button.titlebutton, .list-row.button, .header-bar .list-row.button.titlebutton, -.titlebar .list-row.button.titlebutton, -.list-row.button:backdrop, -.list-row.button:backdrop:active, -.list-row.button:backdrop:checked, -.list-row.button:backdrop:insensitive, -.list-row.button:backdrop:insensitive:active, -.list-row.button:backdrop:insensitive:checked, -.list-row.button:insensitive:active, -.list-row.button:insensitive:checked, .app-notification .button.flat, .app-notification .sidebar-button.button, .app-notification .header-bar .titlebutton.button, .header-bar .app-notification .titlebutton.button, +.titlebar .notebook tab .button.titlebutton, .list-row.activatable, +.list-row.activatable:backdrop, +.list-row.activatable:backdrop:active, +.list-row.activatable:backdrop:checked, +.list-row.activatable:backdrop:insensitive, +.list-row.activatable:backdrop:insensitive:active, +.list-row.activatable:backdrop:insensitive:checked, +.list-row.activatable:insensitive:active, +.list-row.activatable:insensitive:checked, .app-notification .button.flat, .app-notification .sidebar-button.button, .app-notification .header-bar .titlebutton.button, .header-bar .app-notification .titlebutton.button, .app-notification .titlebar .titlebutton.button, .titlebar .app-notification .titlebutton.button, .app-notification.frame .button.flat, @@ -3432,32 +3431,31 @@ GtkScrolledWindow GtkViewport.frame { .grid-child { padding: 2px; } -.list-row.button, .header-bar .list-row.button.titlebutton, -.titlebar .list-row.button.titlebutton, -.list-row.button:backdrop, -.list-row.button:backdrop:active, -.list-row.button:backdrop:checked, -.list-row.button:backdrop:insensitive, -.list-row.button:backdrop:insensitive:active, -.list-row.button:backdrop:insensitive:checked, -.list-row.button:insensitive:active, -.list-row.button:insensitive:checked { +.list-row.activatable, +.list-row.activatable:backdrop, +.list-row.activatable:backdrop:active, +.list-row.activatable:backdrop:checked, +.list-row.activatable:backdrop:insensitive, +.list-row.activatable:backdrop:insensitive:active, +.list-row.activatable:backdrop:insensitive:checked, +.list-row.activatable:insensitive:active, +.list-row.activatable:insensitive:checked { background-color: rgba(41, 41, 41, 0); border-style: none; border-radius: 0; box-shadow: none; } -.list-row.button:hover { +.list-row.activatable:hover { background-color: #323232; } -.list-row.button:active { +.list-row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } -.list-row.button:backdrop:hover { +.list-row.activatable:backdrop:hover { background-color: transparent; } -.list-row.button:selected:active { +.list-row.activatable:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } -.list-row.button:selected:hover { +.list-row.activatable:selected:hover { background-color: #356ba4; } -.list-row.button:selected:backdrop { +.list-row.activatable:selected:backdrop { background-color: #215d9c; } .list-row:selected .button { diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index d472ac126d..8ac8a59bff 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -1134,16 +1134,15 @@ GtkTextView { .titlebar .button.titlebutton:visited, .button:link:hover, .button:link:active, .button:link:checked, .button:visited:hover, .button:visited:active, .button:visited:checked, .button:link:backdrop, .button:visited:backdrop, .menu.button, .header-bar .menu.button.titlebutton, .titlebar .menu.button.titlebutton, .notebook tab .button, .notebook tab .header-bar .button.titlebutton, .header-bar .notebook tab .button.titlebutton, .notebook tab .titlebar .button.titlebutton, -.titlebar .notebook tab .button.titlebutton, .list-row.button, .header-bar .list-row.button.titlebutton, -.titlebar .list-row.button.titlebutton, -.list-row.button:backdrop, -.list-row.button:backdrop:active, -.list-row.button:backdrop:checked, -.list-row.button:backdrop:insensitive, -.list-row.button:backdrop:insensitive:active, -.list-row.button:backdrop:insensitive:checked, -.list-row.button:insensitive:active, -.list-row.button:insensitive:checked, .app-notification .button.flat, .app-notification .sidebar-button.button, .app-notification .header-bar .titlebutton.button, .header-bar .app-notification .titlebutton.button, +.titlebar .notebook tab .button.titlebutton, .list-row.activatable, +.list-row.activatable:backdrop, +.list-row.activatable:backdrop:active, +.list-row.activatable:backdrop:checked, +.list-row.activatable:backdrop:insensitive, +.list-row.activatable:backdrop:insensitive:active, +.list-row.activatable:backdrop:insensitive:checked, +.list-row.activatable:insensitive:active, +.list-row.activatable:insensitive:checked, .app-notification .button.flat, .app-notification .sidebar-button.button, .app-notification .header-bar .titlebutton.button, .header-bar .app-notification .titlebutton.button, .app-notification .titlebar .titlebutton.button, .titlebar .app-notification .titlebutton.button, .app-notification.frame .button.flat, @@ -3594,32 +3593,31 @@ GtkScrolledWindow GtkViewport.frame { .grid-child { padding: 2px; } -.list-row.button, .header-bar .list-row.button.titlebutton, -.titlebar .list-row.button.titlebutton, -.list-row.button:backdrop, -.list-row.button:backdrop:active, -.list-row.button:backdrop:checked, -.list-row.button:backdrop:insensitive, -.list-row.button:backdrop:insensitive:active, -.list-row.button:backdrop:insensitive:checked, -.list-row.button:insensitive:active, -.list-row.button:insensitive:checked { +.list-row.activatable, +.list-row.activatable:backdrop, +.list-row.activatable:backdrop:active, +.list-row.activatable:backdrop:checked, +.list-row.activatable:backdrop:insensitive, +.list-row.activatable:backdrop:insensitive:active, +.list-row.activatable:backdrop:insensitive:checked, +.list-row.activatable:insensitive:active, +.list-row.activatable:insensitive:checked { background-color: rgba(255, 255, 255, 0); border-style: none; border-radius: 0; box-shadow: none; } -.list-row.button:hover { +.list-row.activatable:hover { background-color: #f4f4f4; } -.list-row.button:active { +.list-row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } -.list-row.button:backdrop:hover { +.list-row.activatable:backdrop:hover { background-color: transparent; } -.list-row.button:selected:active { +.list-row.activatable:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } -.list-row.button:selected:hover { +.list-row.activatable:selected:hover { background-color: #4786c8; } -.list-row.button:selected:backdrop { +.list-row.activatable:selected:backdrop { background-color: #4a90d9; } .list-row:selected .button { diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index 48e95cd6ee..f59b40546c 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -1927,15 +1927,15 @@ GtkScrolledWindow { padding: 2px; } -.list-row.button, -.list-row.button:backdrop, -.list-row.button:backdrop:active, -.list-row.button:backdrop:checked, -.list-row.button:backdrop:insensitive, -.list-row.button:backdrop:insensitive:active, -.list-row.button:backdrop:insensitive:checked, -.list-row.button:insensitive:active, -.list-row.button:insensitive:checked { +.list-row.activatable, +.list-row.activatable:backdrop, +.list-row.activatable:backdrop:active, +.list-row.activatable:backdrop:checked, +.list-row.activatable:backdrop:insensitive, +.list-row.activatable:backdrop:insensitive:active, +.list-row.activatable:backdrop:insensitive:checked, +.list-row.activatable:insensitive:active, +.list-row.activatable:insensitive:checked { // reset button inherited stuff @extend %undecorated_button; background-color: transparentize($base_color,1); // for the transition @@ -1945,7 +1945,7 @@ GtkScrolledWindow { } -.list-row.button { +.list-row.activatable { @extend %undecorated_button; background-color: transparentize($base_color,1); // for the transition border-style: none; // I need no borders here @@ -2013,7 +2013,7 @@ GtkScrolledWindow { } // transition -.list-row, list-row.button { +.list-row, .list-row.activatable { transition: all 300ms $ease-out-quad; &:hover { transition: none; } } diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css index 3c203b9d0e..6b8dc10de0 100644 --- a/gtk/theme/HighContrast/gtk.css +++ b/gtk/theme/HighContrast/gtk.css @@ -765,15 +765,15 @@ border-radius: 3px; border-style: solid; } -.button.flat, .button.flat:backdrop, .button.flat:insensitive:backdrop, .menuitem.button.flat, .menuitem.button.flat:backdrop, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, -.list-row.button:backdrop, -.list-row.button:backdrop:active, -.list-row.button:backdrop:checked, -.list-row.button:backdrop:insensitive, -.list-row.button:backdrop:insensitive:active, -.list-row.button:backdrop:insensitive:checked, -.list-row.button:insensitive:active, -.list-row.button:insensitive:checked, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover { +.button.flat, .button.flat:backdrop, .button.flat:insensitive:backdrop, .menuitem.button.flat, .menuitem.button.flat:backdrop, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.activatable, +.list-row.activatable:backdrop, +.list-row.activatable:backdrop:active, +.list-row.activatable:backdrop:checked, +.list-row.activatable:backdrop:insensitive, +.list-row.activatable:backdrop:insensitive:active, +.list-row.activatable:backdrop:insensitive:checked, +.list-row.activatable:insensitive:active, +.list-row.activatable:insensitive:checked, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover { border-color: transparent; background-color: transparent; background-image: none; @@ -2113,36 +2113,36 @@ GtkPlacesSidebar.sidebar .view .separator:backdrop { .grid-child { padding: 2px; } -.list-row.button, -.list-row.button:backdrop, -.list-row.button:backdrop:active, -.list-row.button:backdrop:checked, -.list-row.button:backdrop:insensitive, -.list-row.button:backdrop:insensitive:active, -.list-row.button:backdrop:insensitive:checked, -.list-row.button:insensitive:active, -.list-row.button:insensitive:checked { +.list-row.activatable, +.list-row.activatable:backdrop, +.list-row.activatable:backdrop:active, +.list-row.activatable:backdrop:checked, +.list-row.activatable:backdrop:insensitive, +.list-row.activatable:backdrop:insensitive:active, +.list-row.activatable:backdrop:insensitive:checked, +.list-row.activatable:insensitive:active, +.list-row.activatable:insensitive:checked { background-color: rgba(255, 255, 255, 0); border-style: none; border-radius: 0; box-shadow: none; } -.list-row.button { +.list-row.activatable { background-color: rgba(255, 255, 255, 0); border-style: none; border-radius: 0; box-shadow: none; } - .list-row.button:hover { + .list-row.activatable:hover { background-color: #f2f2f2; } - .list-row.button:active { + .list-row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } - .list-row.button:selected { + .list-row.activatable:selected { background-color: #000; } - .list-row.button:selected:active { + .list-row.activatable:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } - .list-row.button:selected:hover { + .list-row.activatable:selected:hover { background-color: black; } - .list-row.button:selected:backdrop { + .list-row.activatable:selected:backdrop { background-color: #7f7f7f; } .list-row:selected .button { @@ -2229,9 +2229,9 @@ GtkPlacesSidebar.sidebar .view .separator:backdrop { background-image: none; background-color: white; } -.list-row, list-row.button { +.list-row, .list-row.activatable { transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } - .list-row:hover, list-row.button:hover { + .list-row:hover, .list-row.activatable:hover { transition: none; } /********************* -- 2.30.2